<template>
    <div class="container_case">
        <!-- 导航条 -->
        <Nav />

        <div class="banner_wrap"
            v-if="banners&&banners.length>0"
            :style="{'background': 'url('+$baseImageUrl+banners[0].url+')', 'background-repeat': 'no-repeat', 'background-size': '100% 100%'}">
            <div class="desc" v-if="banners&&banners.length>0" v-html="banners[0].description"></div>
        </div>

        <div class="wrap">
            <div class="header">
                <div class="header_title">{{ $t('p4.title') }}</div>
                <div class="icon"></div>
            </div>
        </div>

        <div class="case_wrap">
            <div class="box">
                <div class="item_wrap">
                    <div class="item" v-for="item in dataList">
                        <router-link target="_blank" :to="`/case_detail?id=${item.id}`">
                            <div class="view_img">
                                <img :src="$baseImageUrl+item.poster" alt="">
                            </div>
                            <div class="title">{{ item.title }}</div>
                        </router-link>
                    </div>
                </div>

                <div class="pagination">
                    <el-pagination
                        :page.sync="queryParams.page"
                        :page-size="queryParams.limit"
                        :total="queryParams.total"
                        layout="prev, pager, next"
                        @handleSizeChange="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>


        <!-- 底部footer -->
        <Footer />

    </div>
</template>
<script>
import SwiperComponent from '@/views/swiper_component/index'
import Nav from '@/views/nav/index'
import Footer from '@/views/footer/index'
import p8 from '@/assets/images/wi/8.png'
import { getStore } from '@/libs'
export default {
    name: "index",
    components: {
        Nav,
        SwiperComponent,
        Footer
    },
    data() {
        return {
            p8,
            params: null,

            // 查询条件
            queryParams: {
                total: 0,
                page: 1,
                limit: 6,
                sortColumns: 'sort',
                sortType: 'DESC',

                status: 1,
                pageTypes: '1,2,3'
            },

            dataList: [],
            banners: [],
        }
    },

    created() {
        this.params = this.$route.query

        this.getDataList()

        this.getBanner()
    },
    methods: {
        /**
         * 获取Banner
         */
         async getBanner() {
            let terminal = 2
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                country = 2
            }
            const res = await this.$http({
                url: '/api/siteswiper/list',
                method: 'GET',
                params: {cate: 5, terminal, country}
            })
            if (this.ResultMessage(res, false)) {
                if(res.data) {
                    this.banners = res.data
                }
            }
        },
        /**
         * 获取案例列表
         */
        async getDataList() {
            let terminal = 2
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                country = 2
            }
            this.queryParams = Object.assign({}, this.queryParams, {country})
            const res = await this.$http({
                url: '/api/sitecase/page',
                method: 'GET',
                params: this.queryParams
            })
            if (this.ResultMessage(res, false)) {
                this.dataList = res.data.records || []
                this.queryParams.total = res.data.total
            }
        },

        /**
         * 每页数
         */
         handleSizeChange(val) {
            this.queryParams.limit = val
            this.getDataList()
        },
        /**
         * 当前页
         */
        handleCurrentChange(val) {
            this.queryParams.page = val
            this.getDataList()
        },
    }
};
</script>


<style lang="scss" scope>
@import './index';
</style>
